<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>findAllUser</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .el-header,
    .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
</head>

<body>

<el-container id="app">
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <!-- 添加表格 -->
      <el-table :data="users" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号">
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="password" label="密码">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="loc" label="地址">∫
        </el-table-column>
        <el-table-column prop="searchKeyword" label="搜索关键字">
        </el-table-column>
        <el-table-column prop="privs" label="权限">
        </el-table-column>

      </el-table>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>


<script>
  axios.defaults.withCredentials=true;
  new Vue({
    el: '#app',
    data() {
      return {
        users: [],
        error:''
      }
    },
    created() {
      let _this = this;
      // 为给定 ID 的 user 创建请求
      axios.get('http://localhost:8090/api/user/findAll?token='+localStorage.getItem("user"))
              .then(function (response) {
                console.log(response.data.msg);
                _this.users = response.data.results;
              })
              .catch(function (error) {
                _this.error=error;
                alert(error);
                console.log(error);
              });
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },


    }
  });

</script>
</body>

</html>